import { fromLonLat } from 'ol/proj.js';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

import { GraphLayer } from './graph_layer';
import { HeatMapLayer } from './heatmap_layer';


// мммм надо наверное прочитать можно ли это использовать
const tile_url = 'https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}';
// const tile_url = 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';

/*
h = roads only
m = standard roadmap
p = terrain
r = somehow altered roadmap
s = satellite only
t = terrain only
y = hybrid
*/

// const ice_url = `http://${location.hostname}:3000/i/id/{x}/{y}/{z}`;
const ice_url = 'http://10.8.0.18:3000/i/id/{x}/{y}/{z}';


export class MegaMap {
	map: Map;
	graph_layer: GraphLayer;
	heatmap_layer: HeatMapLayer;
	satellite_layer: TileLayer<OSM>;
	ice_layer: TileLayer<OSM>;


	constructor() {
		this.satellite_layer = new TileLayer({
			source: new OSM({
				url: tile_url,
				transition: 50,
				maxZoom: 18
			})
		});

		this.ice_layer = new TileLayer({
			source: new OSM({
				url: ice_url,
				transition: 50,
				maxZoom: 18
			})
		});
		this.ice_layer.setOpacity(0.5);

		this.graph_layer = new GraphLayer();
		this.heatmap_layer = new HeatMapLayer();

		this.map = new Map({
			controls: [],
			layers: [
				this.satellite_layer,
				// this.ice_layer,
				this.heatmap_layer.layer,
				this.graph_layer.edge_layer,
				this.graph_layer.node_layer
			],
			view: new View({
				center: fromLonLat([100, 70]),
				zoom: 2,
				maxZoom: 21,
				constrainRotation: false
			}),
		});
	}


	attach(container: HTMLElement) {
		this.map.setTarget(container);
	}


	destroy() {
		this.map.dispose();
	}
}